import "./App.css";
import { disposeJavaRoute } from "./router/index.jsx";
import { useRoutes } from "react-router-dom";
//这就很像vue的写法了  App主页面 类似是vue的router-view
import { AliveScope } from "react-activation";
import { useEffect, useMemo } from "react";
import { getRouteList } from "@/service/api.js";
import { useDispatch, useSelector } from "react-redux";
//环境变量的看法
console.log(import.meta.env, "env");
console.log(import.meta.env.VITE_REACT_APP_ENV, "VITE_REACT_APP_ENV");
function App() {
  //子路由页面刷新时重新请求动态路由数据
  const dispatch = useDispatch();
  const token = localStorage.getItem("token");
  const { routeList, loginStatus } = useSelector((state) => state.loginStore);
  useEffect(() => {
    if (token && !loginStatus) {
      dispatch(getRouteList());
    }
  }, [token]);
  //持久化状态有问题
  const newRouteList = useMemo(() => {
    return disposeJavaRoute(routeList);
  }, [routeList]);
  const route = useRoutes(newRouteList);
  return (
    <div className="app">
      <AliveScope>{route}</AliveScope>
      <h1>我是qiankun嵌入节点</h1>
      <div id="micro-app"></div>
    </div>
  );
}

export default App;
